話說，我以前很不會算服務費這東西 (現在也沒多會)，
於是乎今天在想說要寫什麼主題時，就突然決定用這個來寫個基本款計算機吧。

寫好後長這樣，就是如此陽春。

但我們志在練習，就開始動手吧！

先寫好 HTML 架構

<div class="container">
  <h1><del>荷包哭哭</del>  請客計算機</h1>
  <h4>A5 和牛一份 NT$ 1,985 <br>加收 10% 服務費 </h4>
  <p>餐點份數：<input type="text" id="dishNum"> 份</p>
  <p>我要付  <span id="totalPrice">？？</span>  元</p>  
  <input type="button" id="countBtn" class="countBtn" value="計算">
</div>

稍微設定一下 CSS

.container {
  width: 500px;
  padding: 20px 0;
  text-align: center;
  background-color: #40c1c8;
  border-radius: 10px;
}

h1 {
  margin-bottom: 50px;
  color: #fff;
}

h4 {
  margin-bottom: 30px;
}

p {
  margin: 0;
  padding-bottom: 18px;
  font-size: 18px;
}

input {
  width: 40px;
  border: 0px;
  border-radius: 5px;
  vertical-align: text-top;
}

.countBtn {
  margin: 30px 0;
  width: 80px;
  height: 30px;
  font-size: 18px;
  cursor: pointer;
}

span {
  color: #c30909;
  font-weight: bold;
}

來寫 JavaScript 囉！

首先先把需要用到的 element 選起來放到變數裡

const dishNum = document.querySelector('#dishNum');
const countBtn = document.querySelector('#countBtn');
const totalPrice = document.querySelector('#totalPrice');

然後監聽計算鈕，當它被按下時就會開始計算

countBtn.addEventListener('click', function() {
  let A5Beef = 1985;
  let dishTotal = A5Beef * parseInt(dishNum.value);
  let tip = Math.ceil(dishTotal / 10) ;
  let result = dishTotal + tip;
  totalPrice.innerHTML = result;
});

函式內有幾個地方要注意，dishNum.value 的型別是字串，要記得用 parseInt 將型別轉為 number；
計算十趴服務費時，計算出來的數字可能會有小數點，所以用 Math.ceil 進行無條件進位。
最後要記得用 totalPrice.innerHTML 將計算出來的結果展示出來。

點這裡玩玩這個陽春計算機 :D